<template>
    <div>
        <div class="header">
            <div class="title">Wchime智能家居管理系统</div>
            <div class="upNav">
                <div class="loginname">
                <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                <div class="userInfo"><img
                    class="head"
                    :src="headshot"
                    alt=""
                > <span>{{ userInfo.name }}</span></div>
                </span>
                <el-dropdown-menu
                slot="dropdown"
                class="header-new-drop"
                >
                <el-dropdown-item
            
            @click.native="goManage('/userinfo')"
          >用户中心</el-dropdown-item>
          <el-dropdown-item
            divided
            @click.native="logout"
          >退出</el-dropdown-item>
        </el-dropdown-menu>

      </el-dropdown>
                </div>
                    <div class="navAll" v-if="this.userInfo.cate>0">
                    <div class="nav" @click="goManage('/manage/devices')">设备管理</div>
                    <div class="nav" @click="goManage('/manage/alarmlist')">告警列表</div>
                    <div class="nav" @click="goManage('/manage')">后台管理</div>
                    </div>
                    
                
                
            </div>
        </div>

    </div>

  </template>
  
  <script>

  import store from '@/store/index'
  import {getAlarm, DeviceCount, GetRoom, UserInfo} from "@/api/dataReq"
  import {getUserInfo} from '@/utils/auth'
  export default {
    name: 'homeHeader',
    components: {
       
    },
    data() {
      return {
        currentPage:1,
        total:10,
        page_size:10,
        alartList:[],
        deviceCount:{},
        roomCount:{},
        roomDataList:[],
        userInfo: {},
        headshot: '',
      }
    },
    created(){
        
        // this.getAlartList()
        // this.getDeviceCount()
        // this.getRoom()
        // console.log(getUserInfo())
        this.getuserInfo()
    },
    methods:{
        
    
    // 退出
    async logout() {
      await  this.$store.dispatch('user/Logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      
    },
    goManage(path){
        this.$router.push({ path: path})
    },
    getuserInfo() {
      var reqData  ={}
        UserInfo(reqData).then(response => {
          if (response.code == '1') {
            // console.log(response)
           this.userInfo = response.data[0]
           this.headshot =cfg.img_url +  this.userInfo.headshot
          } else {
            
          }
        }).catch(error => {
          console.log('err', error)
          
        })

    },

    }

  }
  </script>
  <style lang="scss" scoped>

    
    .header{
        // height: 5vh;
        min-height: 50px;
        // max-height: 55px;
        min-width: 700px;
        // border: 1px solid red;
        background-color: rgba(11,44,108,1);
        color: white;
        .title{
            float: left;
            line-height: 50px;
            margin-left: 10px;
            // margin-top: 20px;
            font-size: 20px;
            font-weight: 500;
            /* 文字间距 */
            letter-spacing: 5px;
            color: white;
            /* 禁止选中 */
            user-select: none;
            /* 文字阴影 */
            text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
        }
        .upNav{
            float: right;
            line-height: 50px;
            display: flex;
            flex-direction: row;

            font-size: 13px;
            margin-right: 20px;

            .navAll{
                display: flex;
            flex-direction: row;
                .nav{
               
               margin-right: 10px;
               cursor: pointer;
           }
            }
            
        }
    }
    
.loginname {
    display: flex;
    align-items: center;
    .head {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin: 0 15px;
    }
    .cart {
      display: flex;
      align-items: center;
      color: #ffffff;
      margin: 0 20px 0 10px;
      span {
        margin: 0 10px;
        font-size: 12px;
        display: flex;
        align-items: center;
      }
    }
  }
  .userInfo {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }


::v-deep {
  .el-dropdown {
    color: #ffffff;
    cursor: pointer;
  }
  .el-dropdown {
    color: #ffffff;
    cursor: pointer;
  }

  // 下拉菜单的字体颜色
  .el-dropdown-menu__item {
    color: #918e8e;
  }

  // 下拉选择的背景和字体颜色
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #eaecee;
    color: #2b2a2a;
  }

  // 去掉下拉菜单的三角形
  .popper__arrow {
    display: none;
  }
}

</style>